{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}
{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}
{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/fonts/font-awesome/font-awesome.css') }}" rel="stylesheet" type="text/css" media="all" />
    <link href="{{ asset('bundles/applicationbootstrap/css/multilevel-menu/multilevel-menu-brand.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div id="wrapper">

		<div class="nav-side-menu">
		    <div class="brand">Brand Logo</div>
		        <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
		  
		        <div class="menu-list">
		  
		            <ul id="menu-content" class="menu-content collapse out">
		                <li>
		                  <a href="#"><i class="fa fa-dashboard fa-lg"></i> Dashboard</a>
		                </li>
		                <li  data-toggle="collapse" data-target="#products" class="collapsed active">
		                  <a href="#"><i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span></a>
		                </li>
		                <ul class="sub-menu collapse" id="products">
		                    <li class="active"><a href="#">CSS3 Animation</a></li>
		                    <li><a href="#">General</a></li>
		                    <li><a href="#">Buttons</a></li>
		                    <li><a href="#">Tabs & Accordions</a></li>
		                    <li><a href="#">Typography</a></li>
		                    <li><a href="#">FontAwesome</a></li>
		                    <li><a href="#">Slider</a></li>
		                    <li><a href="#">Panels</a></li>
		                    <li><a href="#">Widgets</a></li>
		                    <li><a href="#">Bootstrap Model</a></li>
		                </ul>
		                
		                <li data-toggle="collapse" data-target="#service" class="collapsed">
		                  <a href="#"><i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span></a>
		                </li>  
		                <ul class="sub-menu collapse" id="service">
		                  <li>New Service 1</li>
		                  <li>New Service 2</li>
		                  <li>New Service 3</li>
		                </ul>
		
		                <li data-toggle="collapse" data-target="#new" class="collapsed">
		                  <a href="#"><i class="fa fa-car fa-lg"></i> New <span class="arrow"></span></a>
		                </li>
		                <ul class="sub-menu collapse" id="new">
		                  <li>New New 1</li>
		                  <li>New New 2</li>
		                  <li>New New 3</li>
		                </ul>
		                <li>
		                  <a href="#"><i class="fa fa-user fa-lg"></i> Profile</a>
		                </li>
		                 <li>
		                  <a href="#"><i class="fa fa-users fa-lg"></i> Users</a>
		                </li>
		            </ul>
		            
		     </div>
		</div>
		<div id="page-wrapper">Content</div>
    </div> <!-- /container -->
{% endblock %}